<!DOCTYPE html>
<!--
 * 文件名称: test.html
 * 作者: lxj
 * 创建日期: 2024-12-19
 * 描述: 测试页面，用于验证Chrome插件的功能
 * 版本: 1.0.0
 * 许可证: HHX
-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插件功能测试页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        .test-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .test-element {
            background: #e3f2fd;
            border: 2px solid #2196F3;
            border-radius: 6px;
            padding: 15px;
            margin: 10px 0;
        }
        
        label {
            font-weight: bold;
            color: #333;
        }
        
        .highlight {
            background: #fff3cd;
            border: 1px solid #ffc107;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>Chrome插件功能测试页面</h1>
    
    <div class="highlight">
        <strong>测试说明：</strong>
        <ol>
            <li>安装Chrome插件后，页面右上角会出现🔍图标</li>
            <li>点击图标，插件会同时查找页面中包含for="entname"、for="enttra"、for="orgform"的元素</li>
            <li>在找到的元素的父元素中分别插入"abc123"、"戴少武"、"有限公司"文本</li>
            <li>再次点击图标可以移除已插入的内容</li>
            <li>现在支持多个目标元素同时显示，不会相互覆盖</li>
        </ol>
    </div>
    
    <div class="test-section">
        <h2>测试区域 1 - 企业名称</h2>
        <div class="test-element">
            <label for="entname">这是一个包含 for="entname" 的标签</label>
            <input type="text" id="entname" placeholder="输入框">
        </div>
    </div>
    
    <div class="test-section">
        <h2>测试区域 2 - 企业名称</h2>
        <div class="test-element">
            <p>这个段落包含一个标签：</p>
            <label for="entname">另一个 for="entname" 标签</label>
            <select id="entname2">
                <option>选项1</option>
                <option>选项2</option>
            </select>
        </div>
    </div>
    
    <div class="test-section">
        <h2>测试区域 3 - 企业名称</h2>
        <div class="test-element">
            <form>
                <div>
                    <label for="entname">表单中的标签</label>
                    <textarea id="entname3" rows="3" placeholder="文本区域"></textarea>
                </div>
            </form>
        </div>
    </div>
    
    <div class="test-section">
        <h2>测试区域 4 - 企业类型</h2>
        <div class="test-element">
            <label for="enttra">企业类型:</label>
            <select for="enttra" name="enttra">
                <option value="">请选择企业类型</option>
                <option value="private">私营企业</option>
                <option value="state">国有企业</option>
            </select>
        </div>
    </div>
    
    <div class="test-section">
        <h2>测试区域 5 - 组织形式</h2>
        <div class="test-element">
            <label for="orgform">组织形式:</label>
            <input type="text" for="orgform" name="orgform" placeholder="请输入组织形式">
        </div>
    </div>
    
    <div class="test-section">
        <h2>测试区域 6 - 混合测试</h2>
        <div class="test-element">
            <span for="enttra">企业类型span:</span>
            <p for="orgform">组织形式段落</p>
        </div>
    </div>
    
    <div class="test-section">
        <h2>普通区域（无匹配元素）</h2>
        <div class="test-element">
            <label for="othername">这个标签不会被匹配</label>
            <input type="text" id="othername" placeholder="普通输入框">
        </div>
    </div>
    
    <div class="test-section">
        <h2>嵌套测试区域</h2>
        <div class="test-element">
            <div>
                <div>
                    <label for="entname">深层嵌套的标签</label>
                    <input type="checkbox" id="entname4">
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后的提示
        window.addEventListener('load', function() {
            console.log('测试页面已加载完成');
            console.log('页面包含', document.querySelectorAll('[for="entname"]').length, '个匹配元素');
        });
    </script>
</body>
</html>